這篇來講我覺得蠻重要也蠻容易搞錯的核取方塊和選項按鈕。
Checks(核取方塊)是多選， radios(選項按鈕)是單選。

1. 不論是核取方塊還是選項按鈕，每個選項的外面一層都要加上.from-check類別，讓它們格式化，它們的<input>都要加上.from-check-input類別，且<label>也要加上.form-check-label。
2. 然後一樣，<label>的for="..."要對應<input>的id(這樣點擊label就可以選到該選項)。
3. check-box(核取方塊)的input請加上type="checkbox"；而radio(選項按鈕)的input請加上type="radio"。

check-box

這是check-box的範例程式碼:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

效果:

radio

這是 radio的範例程式碼，記得同一組radio的name要一樣，才能單選:

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

效果:

disabled (禁用)

如果在<input>上加上disabled的話，會連帶<label>的樣式改變，變成較淺的色彩。
如下圖:

Switch (切換開關)

切換開關是基於check box的型式再加上.form-switch完成的，如果使用role="switch"可以更明確傳達它的角色給輔助工具，switch也可以使用disabled達到禁用效果。
範例程式碼:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

效果如下:

水平排列

同層級的 check box 與 radio 預設會垂直堆疊排列，如圖:

如果要使他們水平排列可以把 .form-check-inline 加到任何 .form-check上，下面是以check box為例的範例程式碼:

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

效果如下:

沒有label

事實上<input>沒有.form-check 在外層包覆、沒有<label>的話也是可以正常運作的，不過需要使用像是 aria-label等的親和性名稱提升網頁親和性。

btn 切換按鈕

使用.btn加在<label>上而不是.form-check-label可以創建按鈕型式的check box 與 radio 功能，此外它也支持disabled 屬性。
check box功能的btn 切換按鈕之範例程式碼:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

效果:

radio 功能的 btn 切換按鈕之範例程式碼:

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

效果:(就變只能單選了)

此外，btn 切換按鈕也支持.btn-outline-*，可以為它們添加outline樣式。